<template>
  <div>
    <div class="button-wrapper">
      <el-button type="myBlue" @click="addExpertCategory">新增类别</el-button>
      <el-button type="success" @click="fetchData">刷新</el-button>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body width="600px">
        <div>
          <el-input v-model="dialogExpertCategoryName" placeholder="请输入内容">
            <template slot="prepend">专家类别名称</template>
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table class="admin-info-table"
              height="300"
              :data="tableData.filter(data => !search
                || data.categoryName.toLowerCase().includes(search.toLowerCase())
              )"
              stripe
              style="width: 100%;">
      <el-table-column align="center" label="类别" prop="categoryName"/>
      <el-table-column align="center" label="数量" prop="count"/>
      <el-table-column align="right" width="200">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @click="handleEdit(scope.$index, scope.row)"/>
        </template>
        <template slot-scope="scope">
          <el-button type="myBlue" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" size="mini" :disabled="scope.row.count > 0"
                     @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "ExpertCategoryManage",
  data: function () {
    return {
      dialogVisible: !1,
      dialogTitle: "新增专家类别",
      dialogExpertCategoryName: "",
      dialogExpertCategoryId: -1,
      loading: !1,
      tableData: [
        { categoryId: "0", categoryName: "categoryName", count: 0 },
      ],
      search: "",
    };
  },
  methods: {
    addExpertCategory: function () {
      (this.dialogTitle = "新增专家类别"),
          (this.dialogExpertCategoryName = ""),
          (this.dialogExpertCategoryId = -1),
          (this.dialogVisible = !0);
    },
    submit: function () {
      var t = this;
      if (-1 === this.dialogExpertCategoryId) {
        var e = { categoryName: this.dialogExpertCategoryName };
        this.$http.post("api/category/add", e).then(function (e) {
          200 === e.data.code &&
          (t.fetchData(),
              t.$message({ message: "新增成功！", type: "success" }));
        });
      } else {
        var a = {
          categoryId: this.dialogExpertCategoryId,
          categoryName: this.dialogExpertCategoryName,
        };
        this.$http.post("api/category/update", a).then(function (e) {
          200 === e.data.code &&
          (t.fetchData(),
              t.$message({ message: "修改成功！", type: "success" }));
        });
      }
      this.dialogVisible = !1;
    },
    handleEdit: function (t, e) {
      (this.dialogTitle = "修改专家类别"),
          (this.dialogExpertCategoryName = e.categoryName),
          (this.dialogExpertCategoryId = e.categoryId),
          (this.dialogVisible = !0);
    },
    handleDelete: function (t, e) {
      var a = this;
      this.$confirm(
          "此操作将永久删除该类别（" + e.categoryName + "）, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(function () {
            a.$http
                .get("api/category/delete?categoryId=" + e.categoryId)
                .then(function (t) {
                  200 === t.data.code &&
                  (a.fetchData(),
                      a.$message({ type: "success", message: "删除成功!" }));
                });
          })
          .catch(function () {
            a.$message({ type: "info", message: "已取消删除" });
          });
    },
    fetchData: function () {
      var t = this;
      this.$http.get("/api/category/list").then(function (e) {
        200 === e.data.code && (t.tableData = e.data.data);
      });
    },
  },
  created: function () {
    this.fetchData();
  },
}
</script>

<style>
.button-wrapper {
  margin: 15px;
}
</style>
